<template>
<div class="app-container home">
  <el-row :gutter="10">
    <el-col :span="6">
      <el-card class="num-card" style="background-color: #1ab394;color: #FFFFFF;height: 130px;">
        <NumCard name="文章总数" :number="''+statistics.artCnt" unit="条" icon="el-icon-message-solid"></NumCard>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="num-card" style="background-color: #1c84c6;color: #FFFFFF;height: 130px;">
        <NumCard icon="el-icon-s-promotion" name="栏目总数" :number="''+statistics.catCnt" unit="条"></NumCard>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="num-card" style="background-color: #ff4d4f;color: #FFFFFF;height: 130px;">
        <NumCard icon="el-icon-s-flag" name="标签总数" :number="''+statistics.tagCnt" unit="条"></NumCard>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="num-card" style="background-color: #787be8;color: #FFFFFF;height: 130px;">
        <NumCard icon="el-icon-s-check" name="表单总数" :number="''+statistics.formCnt" unit="条"></NumCard>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" style="padding-top: 10px">
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card class="box-card" shadow="never" :body-style="{height:'482px',padding:'0px'}">
          <div slot="header" class="clearfix" >
            <span>栏目信息</span>
          </div>
          <el-scrollbar style="height: 100%">
            <el-tree
              :data="category"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick">
            </el-tree>
          </el-scrollbar>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card class="box-card" shadow="never" :body-style="{height:'482px',padding:'0px'}">
          <div slot="header" class="clearfix">
            <span>最新文章</span>
            <el-button style="float: right; padding: 0px" type="text" @click="">更多</el-button>
          </div>
          <el-scrollbar>
            <div v-for="o in newest" :key="o.id" class="text item">
              <el-link type="primary" :href="'/article/'+o.id" target="_blank">{{ o.title }}</el-link>
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card class="box-card" shadow="never" :body-style="{height:'482px',padding:'0px'}">
          <div slot="header" class="clearfix">
            <span>服务器信息</span>
          </div>
          <el-scrollbar>
            <div class="text item">
              JVM名称：{{serverInfo.jvmName}}
            </div>
            <div class="text item">
              JAVA版本：{{serverInfo.jreVersion}}
            </div>
            <div class="text item">
              JAVA安装路径：{{serverInfo.javaPath}}
            </div>
            <div class="text item">
              JVM总内存：{{serverInfo.jvmTotalMemory}}
            </div>
            <div class="text item">
              JVM可用内存：{{serverInfo.jvmFreeMemory}}
            </div>
            <div class="text item">
              操作系统名称：{{serverInfo.optName}}
            </div>
            <div class="text item">
              操作系统架构：{{serverInfo.optFrameWork}}
            </div>
            <div class="text item">
              数据库版本：{{serverInfo.dbVersion}}
            </div>
          </el-scrollbar>
        </el-card>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content bg-purple">
        <el-card class="box-card" shadow="never" :body-style="{height:'482px',padding:'0px'}">
          <div slot="header" class="clearfix" >
            <span>开发团队</span>
          </div>
          <el-scrollbar>
            <div class="text item">
              版权所有：江苏众沃版权所有
            </div>
            <div class="text item">
              开发团队成员：许峰
            </div>
            <div class="text item">
              联系方式：18920910938
            </div>
            <div class="text item">
              官方网址：<el-link type="primary" href="http://www.jszw888.cn/" target="_blank">http://www.jszw888.cn</el-link>
            </div>
            <div class="text item">
              备案号：<el-link type="primary" href="https://beian.miit.gov.cn/" target="_blank">苏ICP备2023032990号</el-link>
            </div>
            <div class="text item">
              <el-image :src="src" style="height:240px;border-radius:3px"></el-image>
            </div>
          </el-scrollbar>
        </el-card>

      </div>
    </el-col>

  </el-row>
  <el-row :gutter="20" style="padding-top: 10px">
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/category">
        <el-button type="primary" icon="el-icon-plus">栏目文章</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/label">
        <el-button type="primary" icon="el-icon-s-tools">标签管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/file">
        <el-button type="primary" icon="el-icon-paperclip">附件管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/form">
        <el-button type="primary" icon="el-icon-notebook-2">表单管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/type">
        <el-button type="primary" icon="el-icon-shopping-bag-1">风格管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/varable">
        <el-button type="primary" icon="el-icon-coin">变量管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/webmg">
        <el-button type="primary" icon="el-icon-s-home">网站管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/template">
        <el-button type="primary" icon="el-icon-menu">模板管理</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/reback">
        <el-button type="primary" icon="el-icon-brush">备份还原</el-button>
      </router-link>
    </el-col>
    <el-col :xl="2" :md="4" :sm="6" :xs="12" class="elcoltype">
      <router-link to="/cms/statics">
        <el-button type="primary" icon="el-icon-position">静态化</el-button>
      </router-link>
    </el-col>
  </el-row>
</div>
</template>

<script>
import {getDashboardDetail, getCategory} from "@/api/cms/demo";
import NumCard from "@/views/dashboard/NumCard";

export default {
  name: "index.vue",
  components: {
    NumCard,
  },
  data() {
    return {
      statistics:{
        artCnt: 0,
        catCnt: 0,
        tagCnt: 0,
        formCnt: 0
      },
      newest:[],
      serverInfo:{
        jvmName:"",
        jreVersion:"",
        javaPath:"",
        jvmTotalMemory:"",
        jvmFreeMemory:"",
        optName:"",
        optFrameWork:"",
        dbVersion:""
      },
      messageList:[],
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      defaultProps: {
        children: 'children',
        label: 'cnname'
      },
      category:[],

    }
  },
  created() {
    this.getDetail();
    this.getCategoryList();
  },
  methods : {
    getDetail() {
      getDashboardDetail().then(response=>{
        if(response.code == 200){
          let data = response.data;
          this.newest = data.newest;
          this.serverInfo = data.serverInfo
          this.statistics = data.statistics;
        }
      })
    },

    getCategoryList() {
      getCategory().then(response=>{
        this.category = response.data;
      })
    },

    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<style scoped>
.item {
  padding: 14px 4px;
}
.elcoltype{
  padding-top: 5px;
}
</style>
